<template>
  <div class="invitation">
    <div class="contentNav">
      <van-list v-model="loading" :finished="finished" @load="onLoad" :immediate-check="false" finished-text="没有更多了">
        <div class="tie" v-for="(item,index) in comments" :key="index" @click='$router.push({path:"shopDetail",query:{categoryId:item.commentTargetId}})'>
          <div class="top mt-30">
            <img :src="item.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userId}})'/>
            <div class="txt1 l">
              <div class="title">
                <div class="name hide_other">{{item.userName}}</div>
                <div class="clear"></div>
              </div>
              <div class="time">2019年06月25日</div>
            </div>
            <div class="bottom flex r">
              <div class="otherNum2">
                <img src="../../../../public/images/qt_80.png" />{{item.thumbUpNum}}
              </div>
              <!-- <span class="ml-50"  @click='$router.push({path:"leaveMessage",query:{targetType:2,targetId:item.commentId}})'>回复</span> -->
            </div>

            <div class="clear"></div>
          </div>
          <div class="speak-box">
            <p class="my-speak">{{item.content}}</p>
            <!-- <div class="other-speak">
              <div class="txt-box">
                <p>
                  <span>瞎子：</span>老太太过马路我都不扶，就扶你
                </p>
                <p>
                  <span>我是隔壁老王：</span>好，我给领导打电话
                </p>
              </div>
            </div> -->
          </div>
          <div class="navs mt-30 flex_between">
            <div class="navTxt">
              <p class="hide_otherThree">这里是商品的详这里是商品的详情介这里是商品的详情介这里是商品的详情介情介这里是商品的详情介这里是商品的详情介</p>
            </div>
            <img src="../../../../public/images/my_01.png" />
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  name:"myComments",
  data() {
    return {
      tieImage: [
        require("../../../../public/images/my_01.png"),
        require("../../../../public/images/my_01.png"),
        require("../../../../public/images/my_01.png"),
        require("../../../../public/images/my_01.png"),
        require("../../../../public/images/my_01.png"),
        require("../../../../public/images/my_01.png"),
        require("../../../../public/images/my_01.png")
      ],
      comments:[],
      loading: false,
      finished: false,
      page:1,
      isLoading:false,
      size:3,
    };
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.comments,{page:1,size:this.size,commentType:1}).then(data=>{
        data.data.curPageData.forEach((item,index)=>{
          this.getMorecomments(item.commentId)
        })
        this.comments=data.data.curPageData;
        this.page=2;
      });
    },
    getMorecomments(targetId){
      this.$get(this.$api.blog.postsComments,{targetType:1,targetId:targetId,page:1,size:10}).then(data=>{
          console.log(data.data);
          if(this.comments.curPageData) this.comments.curPageData.forEach((item,index,array)=>{
             if(item.commentId==targetId) this.$set(this.comments.curPageData[index],'comments',data.data.curPageData);
          });
          console.log(this.comments);
      });
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.comments,{page:this.page,size:this.size,commentType:1}).then(data=>{
          if((Number(this.page)-1)*this.size<data.data.totalNum){
            // data.data.curPageData.forEach((item,index)=>{
            //   data.data.curPageData[index].images=JSON.parse(item.images)[0];
            // });
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.comments.push(data.data.curPageData[i]);
            };
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
          }
          this.page++;
        })
      }, 500);
    },
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tie {
  padding: 0.3rem;
  position: relative;
  border-top: 0.3rem solid #f5f5f5;
}
.tie .top .pic {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.tie .top .txt1 {
  margin-left: 0.25rem;
}
.tie .top .txt1 .title .name {
  font: 0.32rem/0.35rem "微软雅黑";
  color: #4aace9;
  width: 1.5rem;
  float: left;
  height: 0.45rem;
}
.tie .top .txt1 .time {
  font: 0.24rem/0.35rem "微软雅黑";
  color: #999999;
}
.tie .top .btn_gz {
  width: 0.27;
  height: 0.28rem;
  display: block;
  margin-top: 0.26rem;
}
.tie .txt2 {
  font: 0.32rem/0.4rem "微软雅黑";
  color: #333333;
  margin: 0.3rem 0;
}
.tie .txt2 .more {
  color: #4aace9;
  margin-left: 0.2rem;
  font: 0.3rem/0.4rem "微软雅黑";
}
.tie .pic img {
  display: block;
  height: 1.4rem;
  margin-top: 0.04rem;
  width: 2.18rem;
  margin-bottom: 0.18rem;
}
.tie .bottom {
  font: 0.24rem/0.34rem "微软雅黑";
  color: #aaaaaa;
  height: 40px;
  align-items: center;
}
.tie .bottom .otherNum1 {
  float: right;
}
.tie .bottom img {
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.1rem;
}

.tie .speak-box .my-speak {
  font-size: 0.34rem;
  line-height: 0.54rem;
  padding: 0.2rem 0 0 1rem;
  /* padding: 0.2rem 0 0.5rem 1rem; */
}
.tie .speak-box .other-speak {
  margin-left: 1rem;
  background: rgba(247, 247, 247, 1);
  font-size: 0.3rem;
  color: #333333;
  line-height: 0.47rem;
  border-radius: 0 0.04rem 0.04rem 0.04rem;
  position: relative;
}
.tie .speak-box .other-speak:before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.25rem;
  width: 0;
  height: 0;
  border-top: .25rem solid transparent;
  border-left: .15rem solid rgba(247, 247, 247, 1);
}
.tie .speak-box .other-speak .txt-box {
  padding: 0.1rem 0.2rem;
}
.tie .speak-box .other-speak span {
  color: rgba(146, 146, 146, 1);
}

.navs .navTxt {
  height: 1.65rem;
  flex: 1;
  border: 1px solid #dddddd;
  box-sizing: border-box;
}
.navs .navTxt p {
  font: 0.28rem/0.34rem "微软雅黑";
  color: #333333;
  margin: 0.26rem;
}
.navs img {
  width: 2.14rem;
  height: 1.65rem;
  display: block;
}

.author {
  color: rgba(74, 172, 233, 1);
}

.contentNav{height: calc(100vh - 46px - 1rem - 44px);overflow-y: scroll;}
</style>
